<template>
  <div>
    <div><top-header :isLeft="true" title="我的关注"> </top-header></div>
    <div class="kon" v-show="authorList.length == 0">
      <p>还没有关注的人哦~</p>
    </div>
    <div class="guanzhucontent">
      <div class="guanzhu" v-for="(item, index) in authorList" :key="index" >
        <img :src="getImage(url1 + item.icon)" alt="这是头像"  @click="to(item)"/>
        <div class="xiangqing">
          <p class="author" @click="to(item)">{{ item.name }}</p>
         
          <button class="button2" @click="yiguanzhu(item)" v-if="item.type == 1">
            已关注
          </button>  
         <button class="button1" v-else>关注</button>
        </div>
        <hr />
      </div>
    </div>
  </div>
</template>
<script>
import TopHeader from "../components/TopHeader.vue";
export default {
  components: { TopHeader },
  data() {
    return {
      url1: "https://i2.chuimg.com/",
      authorList: "",
      foodauthor: "",
      show: "",
      author:'',
      store:'',
      icon:''
    };
  },
    mounted() {
  
    this.store = this.$store.getters.foods;
    // console.log(this.store)
  },
  created() {
    this.showauthor();
  },
  methods: {
    showauthor() {
      this.$ajax.get("/mysql/authorselect.php",{
        params:{
          id:localStorage.id
        }
      }).then((res) => {
        console.log(res.data);
        this.authorList = res.data;
      });
    },
    getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
    yiguanzhu(item) {
      // this.show = 1;
      this.foodauthor = item.name;
      console.log(this.foodauthor);
      this.$ajax
        .get("/mysql/authordel.php", {
          params: {
            name: this.foodauthor,
          },
        })
        .then((res) => {
          console.log(res);
          item.type =0
        });
    },
    to(item){
      this.author = item.name
      this.icon = item.icon
       this.$router.push({
        name: "UserDetails",
        query: {
          store: this.store,
          author:this.author,
          icon:this.icon,
        },
      });
    }
  },
};
</script>
<style lang="scss">
.kon {
  margin-top: 100px;
  text-align: center;
  font-size: 16px;
}
.guanzhucontent {
  width: 375.2px;
  margin-top: 70px;
}
.guanzhu {
  margin: 0 10px 20px;
  // width: 375.2px;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  img {
    width: 80px;
    height: 80px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .xiangqing {
    margin-left: 10px;
    width: 280px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .author {
      font-size: 20px;
      margin-bottom: 0;
    }
    .button2 {
      border: 1px solid rgb(146, 141, 142);
      color: rgb(122, 113, 115);
      width: 80px;
      height: 40px;
      background: white;
    }
  }
}
.button1 {
  border: 1px solid rgb(241, 148, 164);
  color: rgb(241, 148, 164);
  width: 80px;
  height: 40px;
  background: white;
}
</style>
